<extend name="public/form"/>
<block name="css"></block>
<block name="content">
    <div class="layui-card-header ">
        <span class="layui-breadcrumb">
        {{$crumbs|raw}}
    </span>
        <a class="layui-btn layui-btn-sm" style="line-height:1.6em;margin-top:3px;float:right"
           href="javascript:location.replace(location.href);" title="刷新">
            <i class="layui-icon" style="line-height:30px">ဂ</i></a>
    </div>
    <div class="layui-card-body ">
        <button class="layui-btn layui-btn-danger layui-btn-sm" onclick="delAll()"><i class="layui-icon"></i>批量删除
        </button>
        <button class="layui-btn layui-btn-sm" onclick="parent.{{:add_tab('新增导航栏','add')}}"><i class="layui-icon"></i>添加
        </button>
        <button class="layui-btn layui-btn-warm layui-btn-sm" onclick="openAll();"><i class="layui-icon"></i>展开或折叠全部
        </button>
        <button class="layui-btn layui-btn-normal layui-btn-sm" onclick="reload()"><i
                class="layui-icon layui-icon-refresh"></i>刷新
        </button>
    </div>
    <div class="layui-card-body ">
        <table class="layui-hidden" id="treeTable" lay-filter="treeTable"></table>
    </div>
</block>
<block name="js">
    <script>
        var editObj = null, ptable = null, treeGrid = null, tableId = 'treeTable', layer = null, $ = null;
        layui.config({
            base: '/xadmin/lib/layui/lay/modules/'
        }).extend({
            treeGrid: 'treeGrid',
        }).use(['jquery', 'treeGrid', 'layer'], function () {
            var $ = layui.jquery;
            var table = layui.table;
            treeGrid = layui.treeGrid;//很重要
            layer = layui.layer;
            ptable = treeGrid.render({
                id: tableId
                , elem: '#' + tableId
                , url: '/admin/nav/tree'
                , cellMinWidth: 100
                , idField: 'id'//必須字段
                , treeId: 'id'//树形id字段名称
                , treeUpId: 'pid'//树形父id字段名称
                , treeShowName: 'title'//以树形式显示的字段
                , heightRemove: [".dHead", 10]//不计算的高度,表格设定的是固定高度，此项不生效
                , height: '100%'
                , isFilter: false
                , iconOpen: false//是否显示图标【默认显示】
                , isOpenDefault: false//栏目默认是展开还是折叠【默认展开】
                , loading: true
                , method: 'post'
                , isPage: false
                , cols: [[
                    // ,{type:'radio'}
                    {type: 'checkbox', sort: true}
                    , {type: 'numbers'}
                    , {field: 'title', width: 300, title: '导航栏名称'}
                    , {field: 'url', width: 300, title: '跳转链接'}
                    , {field: 'sorts', width: 100, title: '排序'}
                    , {
                        width: 100, title: '是否显示', align: 'center'/*toolbar: '#barDemo'*/
                        , templet: function (d) {
                            if (d.status == 1) {
                                return '<a lay-event="status">' + '<input type="checkbox" lay-event="status-close" name="status" lay-skin="switch" lay-text="显示|隐藏" checked>' + '</a>';
                            } else {
                                return '<a lay-event="status">' + '<input type="checkbox" lay-event="status-open" name="status" lay-skin="switch" lay-text="显示|隐藏" >' + '</a>';
                            }
                        }
                    }
                    , {
                        width: 250, title: '操作', align: 'center'/*toolbar: '#barDemo'*/
                        , templet: function (d) {
                            var disable = '';
                            if (d.level > 2) {
                                var addBtn = '<a class="layui-btn layui-btn-xs layui-btn-warm" lay-event="copy"><i class="layui-icon layui-icon-add-1"></i>复制编辑栏目</a>';
                            } else {
                                var addBtn = '<a class="layui-btn layui-btn-xs" lay-event="add"><i class="layui-icon layui-icon-add-1"></i>添加子栏目</a>';
                            }
                            var editBtn = '<a class="layui-btn layui-btn-normal layui-btn-xs" lay-event="edit"><i class="layui-icon layui-icon-edit"></i>编辑</a>';
                            var delBtn = '<a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del"><i class="layui-icon layui-icon-delete">删除</a>';
                            return addBtn + editBtn + delBtn;
                        }
                    }
                ]]
                , parseData: function (res) {//数据加载后回调
                    return res;
                }
            });
            //监听单元格编辑
            treeGrid.on('tool(' + tableId + ')', function (obj) {
                if (obj.event === 'del') {//删除行
                    del(obj);
                } else if (obj.event === "add") {//添加子栏目的
                    xadmin.open('添加', '/admin/nav/add?id=' + obj.data.id);
                }else if (obj.event === "copy") {//复制并修改新的栏目
                    xadmin.open('复制栏目信息并修改添加新的栏目', '/admin/nav/copy?id=' + obj.data.id);
                } else if (obj.event === "edit") {//隐藏
                    xadmin.open('编辑', '/admin/nav/edit?id=' + obj.data.id);
                } else if (obj.event === "status") {//隐藏
                    ajax_update(obj.data.id,{status:1});
                } else if (obj.event === "menu") {//显示
                    ajax_update(obj.data.id,{ismenu:1});
                }
            });

        });

        function ajax_update(id,json) {
            $.ajax({
                url: '/admin/nav/ajax/id/' + id,
                method: 'post',
                data: json,
                dataType: 'JSON',
                success: function (res) {
                    if (res.code == 0) {
                        layer.msg('修改成功', {icon: 1});
                    } else {
                        layer.msg(res.msg, {icon: 5});
                        reload();
                    }
                },
                error: function (data) {
                    layer.msg('服务器繁忙', {icon: 5});
                    reload();
                }
            })
        }

        function del(obj) {
            layer.confirm("你确定删除数据吗？如果存在下级栏目则一并删除，此操作不能撤销！", {icon: 3, title: '提示'},
                function (index) {//确定回调
                    let data = {};
                    data.id = obj.data.id;
                    $.ajax({
                        url: '/admin/nav/delete',
                        method: 'post',
                        data: data,
                        dataType: 'JSON',
                        success: function (res) {
                            //基本演示
                            if (res.code == 0) {
                                layer.msg(res.msg, {icon: 1});
                                obj.del();
                            } else {
                                layer.msg(res.msg, {icon: 5});
                            }
                        },
                        error: function (data) {
                            layer.msg('服务器繁忙', {icon: 5});
                        }
                    });
                    layer.close(index);
                }, function (index) {//取消回调
                    layer.close(index);
                }
            );
        }
        //删除所选的全部
        function delAll() {
            var checkStatus = treeGrid.checkStatus(tableId)
                , data = checkStatus.data;
            var ids = [];
            for (var i = 0; i < data.length; i++) {
                ids.push(data[i].id);
            }
            layer.confirm("你确定删除" + data.length + "条数据吗？此操作不能撤销！", {icon: 3, title: '提示'},
                function (index) {//确定回调
                    let sdata = {};
                    sdata.id = ids;
                    $.ajax({
                        url: '/admin/nav/delete',
                        method: 'post',
                        data: sdata,
                        dataType: 'JSON',
                        success: function (res) {
                            //基本演示
                            if (res.code == 0) {
                                layer.msg(res.msg, {icon: 1});
                                checkStatus.del();
                            } else {
                                layer.msg(res.msg, {icon: 5});
                            }
                        },
                        error: function (data) {
                            layer.msg('服务器繁忙', {icon: 5});
                        }
                    });
                    layer.close(index);
                }, function (index) {//取消回调
                    layer.close(index);
                }
            );

        }
        function openAll() {
            var treedata=treeGrid.getDataTreeList(tableId);
            treeGrid.treeOpenAll(tableId,!treedata[0][treeGrid.config.cols.isOpen]);
        }
        function reload() {
            treeGrid.reload(tableId, {
                page: {
                    curr: 1
                }
            });
        }
    </script>
</block>